.article-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #ffffff 0%, #fff3f1 100%);
  display: flex;
  flex-direction: column;
  position: relative;
}

.top-bar {
  padding: 0 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  box-shadow: 0 12rpx 32rpx rgba(229, 77, 66, 0.12);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
}

.back-btn {
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e54d42;
  font-size: 32rpx;
  font-weight: 600;
}

.back-icon {
  font-size: 32rpx;
}

.top-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #1f1f1f;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 10rpx;
  z-index: -1;
}

.top-placeholder {
  width: 80rpx;
  height: 80rpx;
}

.article-scroll {
  flex: 1;
  padding-bottom: 160rpx;
}

.article-hero {
  background: #ffffff;
  margin: 0 32rpx;
  margin-top: 32rpx;
  border-radius: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.article-tag {
  align-self: flex-start;
  padding: 12rpx 24rpx;
  border-radius: 999rpx;
  background: rgba(229, 77, 66, 0.12);
  color: #e54d42;
  font-size: 24rpx;
}

.article-title {
  font-size: 44rpx;
  font-weight: 700;
  color: #1f1f1f;
  line-height: 1.4;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 24rpx;
  flex-wrap: wrap;
}

.meta-author {
  display: flex;
  gap: 20rpx;
  align-items: center;
  flex: 1;
}

.author-avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.author-name-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.author-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #1f1f1f;
}

.author-level {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  background: linear-gradient(135deg, #ffb6a4 0%, #e54d42 100%);
  color: #ffffff;
  font-size: 22rpx;
}

.author-date {
  font-size: 24rpx;
  color: #8a8f99;
}

.meta-actions {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.follow-btn {
  padding: 14rpx 32rpx;
  border-radius: 999rpx;
  background: #e54d42;
  color: #ffffff;
  font-size: 26rpx;
  font-weight: 600;
}

.metric {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 14rpx 24rpx;
  border-radius: 20rpx;
  background: rgba(229, 77, 66, 0.1);
  color: #d13f35;
  font-size: 24rpx;
}

.metric-icon {
  font-size: 24rpx;
}

.article-content {
  margin: 32rpx;
  background: #ffffff;
  border-radius: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.content-section {
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}

.section-heading {
  font-size: 36rpx;
  font-weight: 700;
  color: #1f1f1f;
}

.section-paragraph {
  font-size: 28rpx;
  color: #4a4f58;
  line-height: 1.8;
}

.section-points {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-top: 8rpx;
}

.point-item {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
}

.point-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #e54d42;
  margin-top: 12rpx;
}

.point-text {
  font-size: 26rpx;
  color: #5b626e;
  line-height: 1.7;
}

.links-card {
  border-radius: 28rpx;
  background: linear-gradient(180deg, #ffe5de 0%, #ffffff 90%);
  padding: 28rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.link-row {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.link-label {
  font-size: 24rpx;
  color: #d13f35;
}

.link-value {
  font-size: 26rpx;
  color: #1f1f1f;
  word-break: break-all;
}

.divider {
  height: 16rpx;
  background: linear-gradient(90deg, rgba(229, 77, 66, 0.18) 0%, rgba(229, 77, 66, 0) 100%);
  margin: 0 32rpx;
  border-radius: 999rpx;
}

.comment-header {
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.comment-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f1f1f;
}

.comment-tabs {
  display: flex;
  gap: 20rpx;
}

.comment-tab {
  padding: 14rpx 28rpx;
  border-radius: 999rpx;
  background: rgba(229, 77, 66, 0.1);
  color: #b04a41;
  font-size: 24rpx;
}

.comment-tab.active {
  background: #e54d42;
  color: #ffffff;
  box-shadow: 0 12rpx 28rpx rgba(229, 77, 66, 0.24);
}

.comment-list {
  padding: 0 32rpx 160rpx;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.comment-card {
}

.comment-main {
  display: flex;
  gap: 20rpx;
}

.comment-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
}

.comment-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.comment-info {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.comment-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #1f1f1f;
}

.comment-time {
  font-size: 24rpx;
  color: #9096a1;
}

.comment-text {
  font-size: 26rpx;
  color: #4a4f58;
  line-height: 1.7;
}

.comment-reply {
  border-radius: 20rpx;
  padding: 20rpx 24rpx;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.reply-tag {
  align-self: flex-start;
  padding: 6rpx 16rpx;
  border-radius: 12rpx;
  background: rgba(229, 77, 66, 0.2);
  color: #d13f35;
  font-size: 22rpx;
  font-weight: 600;
}

.reply-text {
  font-size: 26rpx;
  color: #5b626e;
  line-height: 1.6;
}

.comment-actions {
  display: flex;
  gap: 24rpx;
}

.comment-action {
  display: flex;
  align-items: center;
  gap: 10rpx;
  color: #a0a7b3;
  font-size: 24rpx;
}

.action-icon {
  font-size: 26rpx;
}

.action-count {
  font-size: 24rpx;
}

.comment-footer {
  align-self: center;
  padding: 16rpx 28rpx;
  border-radius: 999rpx;
  background: rgba(229, 77, 66, 0.12);
}

.footer-text {
  color: #d13f35;
  font-size: 24rpx;
}

.comment-input-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
  background: #ffffff;
  box-shadow: 0 -12rpx 28rpx rgba(229, 77, 66, 0.08);
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.input-placeholder {
  flex: 1;
  height: 72rpx;
  border-radius: 999rpx;
  background: #f5f6f7;
  display: flex;
  align-items: center;
  padding: 0 28rpx;
}

.input-text {
  font-size: 26rpx;
  color: #9ca2ad;
}

.input-actions {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.input-action {
  display: flex;
  align-items: center;
  gap: 6rpx;
  padding: 12rpx 20rpx;
  border-radius: 20rpx;
  background: rgba(229, 77, 66, 0.08);
  color: #c54035;
  font-size: 24rpx;
}

.input-action.liked {
  background: #e54d42;
  color: #ffffff;
}

.small-count {
  font-size: 22rpx;
}
